<template>
    <div class="topic-page">
        <div class="content">
            <div class="title">
                <text v-if="required" class="required">*</text>
                {{title}}
            </div>
            <div class="select-list">
                <div class="item" v-for="(item, index) in selected" :key="index">
                    <text>{{item.topicType}}</text>
                    <image class="close" mode="aspectFit" src="@/static/icon-close-red.png" @click="clear(item, index)"></image>
                </div>
                <div class="item add" @click="showDialog" v-if="hideAddBtn">
                    <uni-icons class="icon-add" type="plusempty" size="15" color="#FD453D"></uni-icons>
                    请选择话题
                </div>

            </div>
        </div>
        <uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" @maskClick="maskClick">
            <div class="topic-dialog">
                <div class="header">{{dialogTitle}}</div>
                <div class="topic-list">
                    <div class="topic-item" @click="selectTopic()">
                        <div class="topic-type">换题季</div>
                        <div class="topics">
                            <text class="topic" :class="{active: selectNew}">疑似新题</text>
                        </div>
                    </div>
                    <div class="topic-item" v-for="(item) in topicList" :key="item.topicSeries">
                        <div class="topic-type">{{item.topicSeries}}</div>
                        <div class="topics">
                            <text 
                                class="topic" 
                                :class="{active: topic.select}" 
                                v-for="(topic) in item.topicObjs" 
                                :key="topic.topicType" 
                                @click="selectTopic(topic, item)"
                                >
                                {{topic.topicType}}
                            </text>
                        </div>
                    </div>
                </div>
                <div class="bottom-btn">
                    <div class="submit" @click="submit">提交</div>
                </div>
            </div>
        </uni-popup>
    </div>
</template>

<script>
import UniPopup from '@/components/uni-popup/uni-popup.vue'
import { apiGetTopicList } from '@/api/memory'
    export default {
        components: {
            UniPopup
        },
        props: {
            modelValue: { // 绑定选中话题数据
                type: Array,
                default: []
            },
            dialogTitle: {
                type: String,
                default: ''
            },
            Multiple: { // 多选
                type: Boolean,
                default: true
            },
            modelNew: { // 绑定是否为新话题
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '相关话题'
            },
            required: {
                type: Boolean,
                default: true
            },
            topicType: { // 接口数据类型
                default: 1,
                type: String | Number
            },
        },
        options: {
            styleIsolation: 'shared'
        },
        data() {
            return {
                count: 0,
                topicList: [],
                selected: [], // 选择的话题集合
                tempSelect: [], // 选中话题临时存放
                selectNew: false // 新话题与否
            }
        },
        computed: {
            // 隐藏添加话题按钮
            hideAddBtn(){
                if(this.topicType == 1){
                    return this.selected.length < 10 && !this.selectNew
                }else {
                    return this.selected.length < 1 && !this.selectNew
                }
            }
        },
        methods: {
            // 点遮罩触发 清空未保存的选中
            maskClick(){
                this.tempSelect = []
            },
            // 删除话题
            clear(item, index){
                this.selected.splice(index, 1)
                if(item.type == 'new'){
                    this.selectNew = false
                }
                this.$emit('update:modelValue', this.selected)
                this.$emit('update:modelNew', this.selectNew)
            },
            // 弹出话题选择
            showDialog(){
                this.getTopic()
                this.selectNew = this.selected.some(item => item.type == 'new')
                this.$refs.popup.open()
                
            },
            // 获取话题
            getTopic(){
                apiGetTopicList({partNum: this.topicType}).then(res => {
                    this.topicList = res.data && res.data.map(item => {
                        return {
                            ...item,
                            topicObjs: item.topicObjs.map(topic => {
                                return {
                                    ...topic,
                                    select: this.selected.some(i => i.id == topic.id)
                                }
                            })
                        }
                    }) || []
                }).catch(err => {
                    console.log(err, 'err')
                })
            },
            // 选择话题
            selectTopic(topicObj){
                if(topicObj){ // 选非新话题
                    if(this.tempSelect.length >= 10 && !topicObj.select && this.Multiple){
                        return this.$tip.toast('最多选择10个话题哦～')
                    }
                    if(!this.Multiple){ // 单选时排他
                        this.topicList.forEach(item => {
                            item.topicObjs.forEach(topic => {
                                if(topic.id != topicObj.id){
                                    topic.select = false
                                }
                            })
                        })
                    }
                    topicObj.select = !topicObj.select
                    const newTopic = this.Multiple ? [...this.tempSelect, topicObj] : [topicObj] // 单选覆盖 多选追加
                    if(topicObj.select){ // 点击选中添加
                        this.tempSelect = newTopic
                    }else { // 再次点击取消选中
                        this.tempSelect = this.tempSelect.filter(item => item.id != topicObj.id)
                    }
                    this.selectNew = false
                }else { // 新话题
                    this.selectNew = !this.selectNew
                    this.topicList.forEach(item => {
                        item.topicObjs.forEach(topic => {
                            topic.select = false
                        })
                    })
                    this.tempSelect = []
                }
            },
            // 保存
            submit(){
                const newTopic = {topicType: '疑似新题', type: 'new'}
                if(this.selectNew){
                    this.selected = [newTopic]
                    this.tempSelect = []
                }else {
                    this.selected = this.tempSelect
                }
                this.$emit('update:modelValue', this.selected)
                this.$emit('update:modelNew', this.selectNew)
                this.$refs.popup.close()
            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .topic-page{
        margin-top: toRem(29);
        .title{
            color: #333;
            font-size: toRem(28);
            margin-bottom: toRem(24);
            .required{
                color: #FD453D;
                margin-right: toRem(8);
            }
        }
        .select-list{
            display: flex;
            flex-wrap: wrap;
            .item{
                color: #FD453D;
                padding: toRem(10) toRem(24);
                background-color: rgba(253, 69, 61, .08);
                border-radius: toRem(9);
                position: relative;
                box-sizing: border-box;
                font-size: toRem(24);
                margin: 0 toRem(19) toRem(20) 0;
                image{
                    width: toRem(23);
                    height: toRem(23);
                    position: absolute;
                    right: 0;
                    top: 0;
                    transform: translate(50%,-50%);
                }
                &:last-child{
                    margin-right: 0;
                }
            }
            .add{
                color: #999;
                font-size: toRem(28);
                display: inline-flex;
                align-items: center;
                background-color: #F6F8FC;
                .icon-add{
                    margin-right: toRem(8);
                }
            }
        }
        .topic-dialog{
            max-height: toRem(900);
            padding: 0 toRem(30);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            border-radius: toRem(10) toRem(10) 0 0;
            position: relative;
            .header{
                font-size: toRem(32);
                font-weight: 600;
                color: #333;
                padding: toRem(42) 0 toRem(32);
                box-sizing: border-box;
                width: 100%;
                text-align: center;
            }
            .topic-list{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                overflow: auto;
                flex: 1;
                padding-bottom: toRem(177);
                width: 100%;
                .topic-item{
                    margin-bottom: toRem(41);
                    .topic-type{
                        font-weight: 500;
                        font-size: toRem(28);
                        color: #333;
                    }
                    .topics{
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .topic{
                            background-color: #F6F8FC;
                            border-radius: toRem(8);
                            padding: toRem(25) toRem(30);
                            margin: toRem(30) toRem(30) 0 0;
                            font-size: toRem(24);
                        }
                        .active{
                            background-color: rgba(253, 69, 61, .08);
                            color: #FD453D;
                        }
                    }
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
            .bottom-btn{
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: #fff;
                padding: toRem(35) toRem(30) toRem(64);
                box-sizing: border-box;
                width: 100%;
                .submit{
                    width: 100%;
                    height: toRem(78);
                    background-color: #FD453D;
                    border-radius: toRem(39);
                    color: #fff;
                    font-size: toRem(28);
                    text-align: center;
                    line-height: toRem(78);
                }
            }
        }
    }
 
</style>
